<template>
	<div class="address-item">
		<ul class="selected">
			<li @click="select(address.id)">
				<div class="name">{{ address.consignee }}</div>&nbsp;
				<div class="phone">{{ address.phone }}</div>
			</li>
			<li class="ads" @click="select(address.id)">
				{{ address.area }} <br /> {{ address.detail }}
			</li>
		</ul>
		<navigator v-if="usePath==2" :url='"/pages/user/edit-address?id="+address.id' class="edit">编辑</navigator>
		<navigator v-if="usePath==1" :url='"/pages/user/address?id="+address.id' class="edit">修改地址</navigator>
	</div>
</template>

<script>
	export default {
		props: {
			usePath: 0, // 0 订单详情 1 支付页面 2 地址信息页面
			address: {
				type: Object,
				default: () => ({
					id: 0,
					consignee: "姓名",
					tel: "13*****73",
					area: "**省 **市 **区",
					detail: "*****",
					area:"",
					isDefault: 0
				})
			}
		},
		methods: {
			
			// 选中默认地址
			select(id) {
				// 如果不是从订单页面跳转过来的 不做操作
				// if(this.$route.name!=='address_select') return

				// this.$router.push({name:'order_create',params:{id}})
			},
		}
	}
</script>

<style lang="less" scoped>
	.address-item {
		display: flex;
		background-color: #ffffff;
		box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
		border-radius: 20rpx;

		padding: 15rpx 20rpx;
		margin-bottom: 10rpx;

		.selected {
			padding: 0;
			flex: 4;
			text-align: left;

			li {
				display: flex;
				align-items: center;

				.name {
					font-size: 34rpx;
					font-weight: 600;
				}

				.phone {
					font-size: 30rpx;
					font-weight: 600;
					padding-left: 15rpx;
				}
			}

			.ads {
				color: #8b8b8b;
				justify-content: left;
				display: flex;
				flex-wrap: wrap;
			}
		}

		.edit {
			flex: 1;
			color: #5ca45b;
			line-height: 36px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>